<script setup lang="ts">
import { ref, reactive, nextTick, onMounted } from 'vue'
import FlameCoalAlarmDialog from '@/components/FlameCoalAlarmDialog.vue'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'
import { Document } from '@element-plus/icons-vue'
import fixTime  from '@/utils/fixTime'
import emitter from '@/utils/eventBus'
import {
  getFlameCoalDataApi
} from '@/api/flame'
import { 
  setSprayRunningTimeApi,
  setSprayDelayApi, 
  setFlameStopApi, 
  setFlameHandApi, 
  setFlameAutomaticApi, 
  setSprayStartApi, 
  setSprayStopApi,
  AutomaticModeTestApi
} from '@/api/mqtt'

// props
const props = defineProps({
  showDeviceClick: {
    type: Function,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {}
  }
})

interface flameCoal {
  DeviceID: string,
  Mode: number, //明火煤工作模式，0停止，1手动，2自动
  AutoType: number, // 运行进度，0等待，1延时，2运行
  RunRemainTime: string, // 运行剩余时间
  DelayRemainTime: string, // 延时剩余时间
  SprayRunSetTime: string, // 设置的运行剩余时间
  SprayDelaySetTime: string, // 设置的延时剩余时间
  TemperatureWarn: number, // 温度报警状态，0误报警，1有报警
  SprayRunType: number, // 喷淋设备状态，0未运行，1正在运行
  SprayType: number // 喷淋设备手动启停状态，0已关闭手动喷淋，1已启用手动喷淋
}

// 定义变量
const FlameCoalDialogVisible = ref(false)

// 设备Id
const deviceId = ref('')
// 绑定refs
const flameCoalAlarmList = ref()

// 明火煤设备信息
const flameCoalData: flameCoal = reactive({
  DeviceID: '1#A皮带',
  Mode: 0,
  AutoType: 1,
  RunRemainTime: '0',
  DelayRemainTime: '0',
  SprayRunSetTime: '0',
  SprayDelaySetTime: '0',
  TemperatureWarn: 0,
  SprayRunType: 0,
  SprayType: 0
})

// 设备选择
const deviceOptions = ref([
  {
    label: '1#A-皮带喷淋装置',
    value: '1#A皮带机'
  },
  {
    label: '1#B-皮带喷淋装置',
    value: '1#B皮带机'
  },
  {
    label: '7#-皮带喷淋装置',
    value: '7#皮带机'
  }
])

// 设备
const device = ref('1#A皮带')

// 是否全屏
const isFullScreen = ref(false)

// 工作模式
const workType = ref('stop')
// 控制加载状态
const fullscreenLoading = ref(false)

// 喷淋状态
const sprayStatus = ref('close')

// 喷淋延时
const delayedTiem = ref()
// 喷淋倒计时
const countdownTiem = ref()
// 红外阈值
const infraredWarn = ref()

onMounted(() => {
  emitter.on('LinkStatusData', getLinkStatusInfo)
  emitter.on('FlameCoalData', getFlameCoalInfo)
})

// 定义方法
// 展示弹框
const showFlameCoal = async (id:string) => {
  deviceId.value = id
  flameCoalData.DeviceID = id
  device.value = id
  console.log('展示明火煤弹框------>', deviceId)
  // getFlameCoalData()
  initVideo()
  FlameCoalDialogVisible.value = true
}

// 弹出报警明细
const showAlarmList = () => {
  flameCoalAlarmList.value.showAlarmList()
}

// 获取明火煤信息
const getFlameCoalData = async () => {
  
  let data = {
    startTim: fixTime(new Date()),
    endTime: fixTime(new Date()),
    deviceId: deviceId.value,
    skipCount: 0,
    maxResultCount: 0
  }
  let res = await getFlameCoalDataApi(data)
  if (res.result.items.length) {
    flameCoalData.Mode = res.result.items[0].Mode
    flameCoalData.AutoType = res.result.items[0].AutoType
    flameCoalData.RunRemainTime = res.result.items[0].RunRemainTime
    flameCoalData.DelayRemainTime = res.result.items[0].DelayRemainTime
    flameCoalData.TemperatureWarn = res.result.items[0].TemperatureWarn
    flameCoalData.SprayRunType = res.result.items[0].SprayRunType
    flameCoalData.SprayType = res.result.items[0].SprayType
  }
  workType.value = flameCoalData.Mode === 0 ? 'stop' : (flameCoalData.Mode === 1 ? 'hand' : 'automatic')
  sprayStatus.value = flameCoalData.SprayType ? 'start' : 'close'
  console.log('明火煤信息------------>', data, res)
}

// 加载视频流
const initVideo = () => {
  console.log('加载视频流DeviceID------>', flameCoalData.DeviceID)
  setTimeout(() => {
    let url: string
    if (flameCoalData.DeviceID === '1#A皮带') {
      url = window.Glob.video1
    } else if (flameCoalData.DeviceID === '1#B皮带') {
      url = window.Glob.video2
    } else {
      url = window.Glob.video3
    }
    const video = document.getElementById('video1')
    new window.JSMpeg.Player(url, {
      canvas: video,
      disableWebAssembly: true,
      disableGl: true,
      autoplay: true,
      loop: true
    })
  }, 100)
}

// 全屏
const fullScreen = () => {
  console.log('全屏------>')
  isFullScreen.value = !isFullScreen.value
  initVideo()
}

// 选择工作模式
const selectWorkType = async (type:string) => {
  
  let data = {
    devId: device.value
  }
  
  const loading = ElLoading.service({
    lock: true,
    text: '正在切换工作模式！请稍等。',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  let res
  switch (type) {
  case 'stop':
    res = await setFlameStopApi(data)
    break
  case 'hand':
    res = await setFlameHandApi(data)
    break
  case 'automatic':
    res = await setFlameAutomaticApi(data)
    break
  }
  console.log('选择的模式-------->', type, device, res)
  if (res) {
    loading.close()
    ElMessage({
      // message: `${res.message}`,
      message: '切换成功！',
      type: 'success'
    })
    workType.value = type
  } else {
    loading.close()
    ElMessage({
      // message: `${res.message}`,
      message: '切换失败！',
      type: 'warning'
    })
    return
  }
  // getFlameCoalData()
} 

// 选择喷淋状态
const selectSprayStatus = async (status: string) => {
  let data = {
    devId: device.value
  }
  
  let res
  if (status === 'start') {
    res = await setSprayStartApi(data)
    if (res) {
      ElMessage({
        // message: `${res.message}`,
        message: '喷淋开启成功！',
        type: 'success'
      })
      sprayStatus.value = status
    } else {
      ElMessage({
        // message: `${res.message}`,
        message: '喷淋开启失败！',
        type: 'warning'
      })
    }
  } else {
    res = await setSprayStopApi(data)
    if (res) {
      ElMessage({
        // message: `${res.message}`,
        message: '喷淋关闭成功！',
        type: 'success'
      })
      sprayStatus.value = status
    } else {
      ElMessage({
        // message: `${res.message}`,
        message: '喷淋关闭失败！',
        type: 'warning'
      })
    }
  }
  
  console.log('喷淋状态------->', status, device, res)
  // getFlameCoalData()
}

// 设置喷淋延时
const setSprayDelay = async () => {
  
  if (delayedTiem.value > 30) {
    ElMessage({
      message: '延时不能大于30秒！',
      type: 'warning'
    })
    delayedTiem.value = 0
    return
  }
  const loading = ElLoading.service({
    lock: true,
    text: '正在初始化喷淋延时！请稍等。',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  let data = {
    devId: device.value,
    data: delayedTiem.value
  }
  let res = await setSprayDelayApi(data)
  if (res) {
    loading.close()
    ElMessage({
      // message: `${res.message}`,
      message: '初始化成功！',
      type: 'success'
    })
    flameCoalData.DelayRemainTime = delayedTiem.value + '秒'
  } else {
    loading.close()
    ElMessage({
      // message: `${res.message}`,
      message: '初始化失败！',
      type: 'warning'
    })
    return
  }
  console.log('喷淋延时设置----->', res)
}

// 设置喷淋倒计时
const setRunRemainTime = async () => {
  if (countdownTiem.value > 30) {
    ElMessage({
      message: '倒计时不能大于30秒！',
      type: 'warning'
    })
    countdownTiem.value = 0
    return
  }
  const loading = ElLoading.service({
    lock: true,
    text: '正在保存喷淋倒计时！请稍等。',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  let data = {
    devId: device.value,
    data: countdownTiem.value
  }
  let res = await setSprayRunningTimeApi(data)
  if (res) {
    loading.close()
    ElMessage({
      // message: `${res.message}`,
      message: '保存成功！',
      type: 'success'
    })
    flameCoalData.RunRemainTime = countdownTiem.value  + '秒'
  } else {
    loading.close()
    ElMessage({
      // message: `${res.message}`,
      message: '保存失败！',
      type: 'warning'
    })
    return
  }
  console.log('喷淋倒计时设置----->', res)
}

// 自动模式测试
const AutomaticModeTest = async () => {
  let data = {
    devId: device.value
  }
  let res = await AutomaticModeTestApi(data)
  console.log('自动模式测试----->', res)
}

// 获取连接状态数据
const getLinkStatusInfo = (LinkStatusData: any) => {
  // console.log('连接状态数据----->', LinkStatusData)
}
// 获取明火煤信息
const getFlameCoalInfo = (FlameCoalData: any) => {
  let data = FlameCoalData.find((item:any) => {
    return item.DeviceID === flameCoalData.DeviceID
  })
  flameCoalData.Mode = data.Mode
  flameCoalData.AutoType = data.AutoType
  flameCoalData.RunRemainTime = data.RunRemainTime
  flameCoalData.DelayRemainTime = data.DelayRemainTime
  flameCoalData.SprayRunSetTime = data.SprayRunSetTime
  flameCoalData.SprayDelaySetTime = data.SprayDelaySetTime
  flameCoalData.TemperatureWarn = data.TemperatureWarn
  flameCoalData.SprayRunType = data.SprayRunType
  flameCoalData.SprayType = data.SprayType
  if (data.Mode === 0) {
    workType.value = 'stop'
  } else if (data.Mode === 1) {
    workType.value = 'hand'
  } else {
    workType.value = 'automatic'
  }
  if (!data.SprayType) {
    sprayStatus.value = 'close'
  } else {
    sprayStatus.value = 'start'
  }
  console.log('mqtt推送的明火煤数据----->aaaaa', FlameCoalData, flameCoalData)
  // console.log('明火煤数据----->bbbbb',  workType, sprayStatus)
}

// 关闭弹框
const closeDialog = () => {
  console.log('关闭弹框---->')
  props.showDeviceClick()
  const video:any = document.getElementById('video1')
  const context = video.getContext('2d')
  context.clearRect(0, 0, video.width, video.height)
}

// 向外暴露的函数
defineExpose({
  showFlameCoal
})
</script>

<template>
  <el-dialog
    v-model="FlameCoalDialogVisible"
    class="flame-coal-dialog"
    @close="closeDialog"
  >
    <template #header>
      <div class="flame-header-box">
        <div class="title">
          明火煤展示
        </div>
        <div class="device-select">
          <!-- <el-select
            v-model="device"
            size="mini"
            disabled
            class="infrar-state"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in deviceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <div>
            {{ device }}喷淋装置
          </div>
        </div>
        <div
          class="warn-detail"
          @click="showAlarmList"
        >
          <Document style="height: 20px;margin-top: 5px;color: #488bf1FF;" />
          报警明细
        </div>
      </div>
    </template>
    <div class="flame-dialog-main-box">
      <div class="show-body">
        <div class="info-box">
          <div
            style="margin-left: 0;"
            class="state-box"
          >
            <span>系统链接状态：</span>
            <div
              v-if="false"
              id="fail"
            >
              链接失败
            </div>
            <div
              v-else
              id="success"
            >
              链接成功
            </div>
          </div>
          <div class="btn-box">
            <span>喷淋连接状态：</span>
            <div
              v-if="false"
              id="fail"
            >
              链接失败
            </div>
            <div
              v-else
              id="success"
            >
              链接成功
            </div>
          </div>
          <div class="time-title">
            <span>工作模式：</span>
            <div>{{ workType === 'stop' ? '停止' : (workType === 'hand' ? '手动模式' : '自动模式') }}</div>
          </div>
          <div class="time-box">
            <span>告警状态：</span>
            <div>{{ flameCoalData.TemperatureWarn ? '有报警' : '未报警' }}</div>
          </div>
        </div>
        <div class="show-box">
          <div
            :id="(flameCoalData.TemperatureWarn === 0 ? '' : (false ? 'firstWaring' : 'secondWaring'))"
            class="probe1"
          >
            红外摄像头:&ensp;{{ flameCoalData.TemperatureWarn === 0 ? '未报警' : '有报警' }}
          </div>
          <div
            :id="(true ? '' : (false ? 'firstWaring' : 'secondWaring' ))"
            class="probe2"
          >
            喷淋装置:&ensp;{{ workType === 'stop' ? '停止' : (workType === 'hand' ? ( sprayStatus === 'start' ? '开启' : '关闭' ) : '自动模式') }}
          </div>
          <!-- <div
            :id="(true ? '' : (true ? 'firstWaring' : 'secondWaring' ))"
            class="probe3"
          >
            喷淋装置二&ensp;自动模式
          </div>
          <div
            :id="(true ? '' : (true ? 'firstWaring' : 'secondWaring' ))"
            class="probe4"
          >
            喷淋装置三&ensp;自动模式
          </div>
          <div
            :id="(true ? '' : (true ? 'firstWaring' : 'secondWaring' ))"
            class="probe5"
          >
            喷淋装置四&ensp;自动模式
          </div> -->
          <!-- <div
            :id="(true ? '' : (true ? 'firstWaring' : 'secondWaring' ))"
            class="probe6"
          >
            六号探头&emsp;35℃
          </div>
          <div
            :id="(false ? '' : (true ? 'firstWaring' : 'secondWaring' ))"
            class="probe7"
          >
            七号探头&emsp;35℃
          </div>
          <div
            :id="(true ? '' : (true ? 'firstWaring' : 'secondWaring' ))"
            class="probe8"
          >
            八号探头&emsp;35℃
          </div> -->
          <!-- <div
            :id="(true ? '' : (true ? 'firstWaring' : 'secondWaring'))"
            class="spray"
          >
            喷淋装置：吹扫运行
          </div> -->
          <!-- <div
            :id="(true ? '' : (true ? 'borderFirstWaring' : 'borderSecondWaring'))"
            class="nozzle-border"
          /> -->
          <div
            :id="(true ? '' : (true ? 'borderFirstWaring' : 'borderSecondWaring'))"
            class="border1"
          />
          <div
            :id="(true ? '' : (false ? 'borderFirstWaring' : 'borderSecondWaring' ))"
            class="spray-line"
          />
          <!-- <div
            :id="(true ? '' : (true ? 'borderFirstWaring' : 'borderSecondWaring' ))"
            class="border3"
          />
          <div
            :id="(true ? '' : (true ? 'borderFirstWaring' : 'borderSecondWaring' ))"
            class="border4"
          />
          <div
            :id="(true ? '' : (true ? 'borderFirstWaring' : 'borderSecondWaring' ))"
            class="border5"
          /> -->
          <!-- <div
            :id="(true ? '' : (true ? 'borderFirstWaring' : 'borderSecondWaring' ))"
            class="border6"
          />
          <div
            :id="(true ? '' : (true ? 'borderFirstWaring' : 'borderSecondWaring' ))"
            class="border7"
          />
          <div
            :id="(true ? '' : (true ? 'borderFirstWaring' : 'borderSecondWaring' ))"
            class="border8"
          /> -->
          <div
            v-if="!isFullScreen"
            class="video-box"
          >
            <div class="video-title">
              <span>红外摄像图像</span>
              <div
                class="video-icon"
                @click="fullScreen"
              />
            </div>
            <canvas
              id="video1"
            />
          </div>
          <div
            v-else
            class="video-full-box"
          >
            <div class="video-title">
              <span>红外摄像图像</span>
              <div
                class="video-icon"
                @click="fullScreen"
              />
            </div>
            <canvas
              id="video1"
            />
          </div>
        </div>
      </div>
      <div class="operate-box">
        <div class="title-box">
          工作模式
        </div>
        <div class="work-type">
          <div
            :id="(workType === 'stop') ? 'workActive' : ''"
            class="stop-type"
            @click="selectWorkType('stop')"
          >
            停&emsp;止
          </div>
          <div
            :id="(workType === 'hand') ? 'workActive' : ''"
            class="hand-type"
            @click="selectWorkType('hand')"
          >
            手&emsp;动
          </div>
          <div
            :id="(workType === 'automatic') ? 'workActive' : ''"
            class="automatic-type"
            @click="selectWorkType('automatic')"
          >
            自&emsp;动
          </div>
        </div>
        <div class="title-box">
          手动喷淋控制
        </div>
        <div class="spray-control">
          <div
            :id="(workType !== 'hand') ? 'sprayDisable' : (sprayStatus === 'start') ? 'sprayActive' : ''"
            class="spray-start"
            @click="selectSprayStatus('start')"
          >
            喷淋开
          </div>
          <div
            :id="(workType !== 'hand') ? 'sprayDisable' : (sprayStatus === 'close') ? 'sprayActive' : ''"
            class="spray-close"
            @click="selectSprayStatus('close')"
          >
            喷淋关
          </div>
        </div>
        <div class="automatic-control">
          自动控制
          <span @click="AutomaticModeTest">自动模式控制</span>
        </div>
        <div class="step-box"> 
          <div class="icon-box">
            <div
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 0 || flameCoalData.AutoType === 1 || flameCoalData.AutoType === 2) ? 'finishIconBorder' : ''))"
              class="icon-border"
            >
              <div
                :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 0 || flameCoalData.AutoType === 1 || flameCoalData.AutoType === 2) ? 'finishBGC' : ''))"
                class="standby-icon"
              />
            </div>
            <div
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 1 || flameCoalData.AutoType === 2) ? 'finishBorder' : ''))"
              class="border-box"
            />
            <div
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 1 || flameCoalData.AutoType === 2) ? 'finishIconBorder' : ''))"
              class="icon-border"
            >
              <div
                :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 1 || flameCoalData.AutoType === 2) ? 'finishBGC' : ''))"
                class="delayed-icon"
              />
            </div>
            <div
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 2) ? 'finishBorder' : ''))"
              class="border-box"
            />
            <div
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 2) ? 'finishIconBorder' : ''))"
              class="icon-border"
            >
              <div
                :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 2) ? 'finishBGC' : ''))"
                class="countdown-icon"
              />
            </div>
          </div>
          <div class="info-box">
            <div 
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 0 || flameCoalData.AutoType === 1 || flameCoalData.AutoType === 2) ? 'finishColor' : ''))"
            >
              待机
            </div>
            <div 
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 1 || flameCoalData.AutoType === 2) ? 'finishColor' : ''))"
            >
              喷淋延时
            </div>
            <div 
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 2) ? 'finishColor' : ''))"
            >
              喷淋倒计时
            </div>
            <div />
            <div 
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 1 || flameCoalData.AutoType === 2) ? 'finishColor' : ''))"
            >
              {{ flameCoalData.SprayDelaySetTime }}
            </div>
            <div 
              :id="((workType !== 'automatic') ? '' : ((flameCoalData.AutoType === 2) ? 'finishColor' : ''))"
            >
              {{ flameCoalData.SprayRunSetTime }}
            </div>
          </div>
        </div>
        <div class="title-box">
          参数设置
        </div>
        <div class="parameter-box">
          <div class="time-parameter">
            <div class="title-box">
              自动控制-时间
            </div>
            <div class="delayed-tiem">
              <el-input
                v-model="delayedTiem"
                placeholder="请输入数值"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                :disabled="(workType === 'stop' || workType === 'hand') ? true : false"
                class="input-with-select"
              >
                <template #prepend>
                  <span class="input-title">&emsp;喷淋延时&emsp;</span>
                </template>
                <template #append>
                  <el-button @click="setSprayDelay">
                    初始化
                  </el-button>
                </template>
              </el-input>
            </div>
            <div class="countdown-tiem">
              <el-input
                v-model="countdownTiem"
                placeholder="请输入数值"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                class="input-with-select"
                :disabled="(workType === 'stop' || workType === 'hand') ? true : false"
              >
                <template #prepend>
                  <span class="input-title">&ensp;喷淋倒计时&ensp;</span>
                </template>
                <template #append>
                  <el-button @click="setRunRemainTime">
                    保&emsp;存
                  </el-button>
                </template>
              </el-input>
            </div>
          </div>
          <div class="infrared-parameter">
            <div class="title-box">
              温度报警状态(红外)：<span
                v-if="flameCoalData.TemperatureWarn === 0"
                style="color: #00e224;"
              >无报警</span><span
                v-else
                style="color: #e20000ff;"
              >有报警</span>
            </div>
            <!-- <div class="infrared-warn">
              <el-input
                v-model="infraredWarn"
                placeholder="请输入数值"
                class="input-with-select"
              >
                <template #prepend>
                  <span class="input-title">&ensp;报警阈值(℃)</span>
                </template>
                <template #append>
                  <el-button>保&emsp;存</el-button>
                </template>
              </el-input>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
  <FlameCoalAlarmDialog ref="flameCoalAlarmList" />
</template>

<style lang="scss" scoped>
.flame-dialog-main-box {
  display: flex;
  justify-content: space-between;
  .show-body {
  width: 1040px;
  height: 680px;
  margin-left: 10px;
  border: 1px solid #e5e6ebFF;
  .info-box {
    display: flex;
    width: 1016px;
    height: 50px;
    padding-left: 24px;

    /* border: 1px solid red; */
    background: #f7f8faff;
    > div {
      display: flex;
      height: 50px;
      margin-left: 40px;
      line-height: 50px;
      >span {
        color: #6B7785;
        font-weight: 600;
        font-size: 16px;
        font-family: PingFang,sans-serif;
        background-clip: text;
      }
      >div {
        color: #6B7785;
        font-weight: 600;
        font-size: 16px;
        font-family: PingFang,sans-serif;
        background-clip: text;
      }

      /* border: 1px solid blue; */
      #success {
        color: #00E224FF;
      }
      #fail {
        color: #E20000FF;
      }
    }
  }
  .show-box {
    position: relative;
    width: 1040px;
    height: 690px;
    background-image: url("../assets/bckImg/flameCoal.png");
    background-repeat: no-repeat;

    /* background-position: 50px 130px; */
    background-size: 1000px 700px;

    /* border: 1px solid red; */
    .probe1,
    .probe2,
    .probe3,
    .probe4,
    .probe5,
    .probe6,
    .probe7,
    .probe8,
    .spray {
      position: absolute;
      left: 100px;
      width: 188px;
      height: 30px;
      color: #2b8aff;
      font-weight: 600;
      font-size: 16px;
      font-family: PingFang,sans-serif;
      line-height: 30px;
      text-align: center;
      background: rgba($color: #05a8ff, $alpha: 30%);
      border-radius: 100px;
    }
    .probe1 {
      top: 150px;
      left: 120px;
      width: 188px;
    }
    .probe2 {
      top: 135px;
      left: 530px;
    }
    .probe3 {
      top: 160px;
      left: 520px;
    }
    .probe4 {
      top: 120px;
      left: 540px;
    }
    .probe5 {
      top: 80px;
      left: 560px;
    }
    .probe6 {
      top: 165px;
      left: 618px;
    }
    .probe7 {
      top: 118px;
      left: 667px;
    }
    .probe8 {
      top: 59px;
      left: 687px;
    }
    .spray {
      top: 48px;
      left: 660px;
      width: 195px;
    }
    #firstWaring {
      color: #FF8400FF;
      background: rgba($color: #FFA748FF, $alpha: 30%);
    }
    #secondWaring {
      color: #F22F;
      background: rgba($color: #F22, $alpha: 30%);
    }
    .border1,.border5 {
      position: absolute;
      top: 180px;
      left: 215px;
      width: 0;
      height: 58px;
      border: 1px dashed #05a8ffff;
      border-spacing: 5px;
    }
    .border2,.border6 {
      position: absolute;
      top: 235px;
      left: 596px;
      width: 0;
      height: 38px;
      border: 1px dashed #05a8ffff;
      border-spacing: 5px;
    }
    .border3,.border7 {
      position: absolute;
      top: 185px;
      left: 620px;
      width: 0;
      height: 90px;
      border: 1px dashed #05a8ffff;
      border-spacing: 5px;
    }
    .border4,.border8 {
      position: absolute;
      top: 150px;
      left: 642px;
      width: 0;
      height: 115px;
      border: 1px dashed #05a8ffff;
      border-spacing: 5px;
    }
    .border5 {
      top: 110px;
      left: 664px;
      height: 152px;
    }
    .border6 {
      top: 195px;
      left: 722px;
    }
    .border7 {
      top: 148px;
      left: 748px;
    }
    .border8 {
      top: 88px;
      left: 772px;
    }
    #borderFirstWaring {
      border: 1px dashed #FFA748FF;
    }
    #borderSecondWaring {
      border: 1px dashed #F22F;
    }
    .nozzle-border {
      position: absolute;
      top: 75px;
      left: 712px;
      width: 108px;
      height: 124px;
      background: none;
      background-image: url("../assets/bckImg/flameborder.png");
      background-repeat: no-repeat;
      background-size: 75% 100%;
      border-radius: 0;
    }
    .video-box {
      position: relative;
      top: 10px;
      left: 815px;
      width: 220px;
      height: 220px;
      border: 1px solid #000;
      .video-title {
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 200px;
        height: 40px;
        padding: 0 10px;
        color: #fff;
        background-color: #000F;
        border-radius: 2px;
        opacity: 0.5;
        .video-icon {
        width: 20px;
        height: 20px;
        background-image: url('../assets/bckImg/fullScreen.png');
        background-size: 100% 100%;
        &:hover {
          cursor: pointer;
        }
      }
      }
      #video1 {
        width: 220px;
        height: 220px;
      }
    }
    .video-full-box {
      position: relative;
      top: 10px;
      left: 425px;
      width: 610px;
      height: 610px;
      border: 1px solid #000;
      .video-title {
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 590px;
        height: 40px;
        padding: 0 10px;
        color: #fff;
        background-color: #000F;
        border-radius: 2px;
        opacity: 0.5;
        .video-icon {
        width: 20px;
        height: 20px;
        background-image: url('../assets/bckImg/fullScreen.png');
        background-size: 100% 100%;
        &:hover {
          cursor: pointer;
        }
      }
      }
      #video1 {
        width: 610px;
        height: 610px;
      }
    }
    .spray-line {
      position: absolute;
      top: 165px;
      left: 596px;
      width: 70px;
      height: 120px;
      background-image: url('../assets/bckImg/flameBorder.png');
      background-size: 100% 100%;

      /* border: 1px solid red; */
    }
  }
}
.operate-box {
  width: 428px;
  height: 100%;

  /* border: 1px solid red; */
  .title-box,
  .automatic-control {
  width: 404px;
  height: 50px;
  padding-left: 24px;
  line-height: 50px;
  background: #F7F8FA;
  border: 1px solid #E5E6EB;
  border-radius: 2px 2px 0 0;
  opacity: 1;
  }
  .work-type,
  .spray-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 380px;
    height: 80px;
    padding: 0 24px;
    border: 1px solid #E5E6EB;

    /* border: 1px solid red; */
    >div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 116px;
      height: 42px;
      color: #fff;
      background-color: #a9aeb8FF;
      &:hover {
        cursor: pointer;
      }
    }
    #workActive {
      background-color: #2191ffFF;
    }
    #sprayActive {
      background-color: #2191ffFF;
    }
    #sprayDisable {
      background-color: #a9aeb8FF;
      &:hover {
        cursor: not-allowed;
      }
    }
  }
  .spray-control {
    justify-content: flex-start;
    .spray-close {
      margin-left: 16px;
    }
  }
  .automatic-control {
    display: flex;
    justify-content: space-between;
    width: 388px;
    padding-right: 16px;
    >span {
      color: #2190fdFF;
    }
  }
  .step-box {
    width: 428px;
    height: 80px;
    padding-top: 10px;
    border: 1px solid #E5E6EB;
    .icon-box {
      display: flex;
      align-items: center;
      justify-content: center;
      .border-box {
        width: 110px;
        border-top: 2px dashed #6a7684FF;
      }
      .icon-border {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: 1px solid #6a7684FF;
        border-radius: 12px;
        .standby-icon,
        .countdown-icon,
        .delayed-icon {
          width: 20px;
          height: 20px;
          background-color: #6a7684FF;
          border-radius: 10px;
        }
        .standby-icon {
          background-image: url('../assets/bckImg/standby.png');
          background-size: 100% 100%;
        }
        .countdown-icon {
          background-image: url('../assets/bckImg/countdown.png');
          background-size: 100% 100%;
        }
        .delayed-icon {
          background-image: url('../assets/bckImg/delayed.png');
          background-size: 100% 100%;
        }
      }
      #finishBorder {
        border-top: 2px dashed #2190fdFF;
      }
      #finishIconBorder {
        border: 1px solid #2190fdFF;
      }
      #finishBGC {
        background-color: #2190fdFF;
      }
    }
    .info-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      /* border: 1px solid red; */
      #finishColor {
        color: #2190fdFF;
      }
      >div {
        display: flex;
        justify-content: center;
        width: 32%;
        height: 20px;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        line-height: 20px;
        background-clip: text;

        /* border: 1px solid green; */
      }
    }
  }
  .parameter-box {
    width: 428px;
    height: 215px;
    border: 1px solid #E5E6EB;
    .input-title {
      color: #A9AEB8;
      font-weight: 400;
      font-size: 14px;
      font-family: PingFang,sans-serif;
      letter-spacing: 1px;
    }
    .time-parameter {
      /* border: 1px solid red; */
      .title-box {
        height: 20px;
        margin-top: 16px;
        color: #6B7785;
        font-weight: 500;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        line-height: 20px;
        background: none;
        background-clip: text;
        border: none;
      }
      .delayed-tiem,
      .countdown-tiem {
        width: 380px;
        height: 40px;
        padding: 0 24px;
        line-height: 40px;
      }
      .countdown-tiem {
        margin-top: 8px;
      }
    }
    .infrared-parameter {
      .title-box {
        height: 20px;
        margin-top: 16px;
        color: #6B7785;
        font-weight: 500;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        line-height: 20px;
        background: none;
        background-clip: text;
        border: none;
      }
      .infrared-warn {
        width: 380px;
        height: 40px;
        padding: 0 24px;
        line-height: 40px;
      }
    }
  }
}
}

</style>
<style lang="scss">
.flame-coal-dialog {
  width: 1540px;
  height: 750px;
  .flame-header-box {
    display: flex;
    margin-left: 10px;
    .title {
      width: 120px;
      height: 28px;
      color: #4e5969;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang,sans-serif;
      line-height: 23px;
      background-clip: text;
    }
    .device-select {
      height: 30px;
      line-height: 30px;

      /* border: 1px solid red; */
    }
    .warn-detail {
      display: flex;
      width: 100px;
      height: 30px;
      margin-left: 16px;
      padding-left: 5px;
      line-height: 30px; 
      border-radius: 4px;
      box-shadow: 0 2px 10px 0 rgb(166 184 208 / 60%);
      &:hover {
        cursor: pointer;
      }

      /* border: 1px solid red; */
    }
    .position-name {
      width: 252px;
      height: 28px;
      margin-left: 24px;
      color: #2191ff;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang,sans-serif;
      line-height: 23px;
      background-clip: text;
    }
  }
  .el-dialog__body {
    padding-top: 0;
  }
}
</style>